<template>
	<view class="container">
		<com-head textTit="优惠券" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		<view class="tabList">
			<view class="list"  @click="chiose(index)"
			:class="activeIndex == index ? 'active' : '' "
			v-for="(ele,index) in list" :key="index">{{ele}}</view>
		</view>
		<view class="couponList" v-if="couponsList.length">
			<view class="list" v-for="(ele,index) in couponsList" :key="index" v-if="ele.couponPool != null">
				<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/Group 1000016764.png" mode=""></image>
				<view class="couponContent" v-if="ele.couponPool != null">
					<view class="left" >
						<view class="couponL" v-if="ele.couponPool.off_type != 1">
							<view class="price">￥<text>{{Number(ele.couponPool.face_value).toFixed(2)}}</text></view>
							<view class="fullReduction">满{{Number(ele.couponPool.min_value).toFixed(2)}}元可用</view>
						</view>
						<view class="couponL" v-else>
							<view class="price"><text>{{ele.couponPool.discount}}</text>折</view>
							<view class="fullReduction">最大折扣{{Number(ele.couponPool.max_discount).toFixed(2)}}</view>
						</view>
						<view class="couponM">
							<view class="t1">{{ele.couponPool.title}}({{getStausText(ele.couponPool.coupon_scope_use_id)}})</view>
							<view class="t2">有效期：{{$u.timeFormat(ele.couponPool.start_time, 'yyyy-mm-dd')}}至{{$u.timeFormat(ele.couponPool.end_time,'yyyy-mm-dd')}}</view>
						</view>
					</view>
					<view class="couponR">
						<!-- <view class="iconfont icon" :class="isCheck ? 'icon-a-xingzhuang1' : 'icon-weixuanzhong' "></view> -->
						<view class="btn" :class="isCheck ? 'checked' : '' " @click="jump('/pages/index/index', 1)">去使用</view>
					</view>
				</view>
			</view>
			<u-loadmore margin-top="60" margin-bottom="30" :status="status" />
		</view>
		<!-- 没有数据时 -->
		<view class="noDate" v-else>
			<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/tijiao2.png" mode=""></image>
			<view>暂无优惠券~</view>
		</view>
		
		<!-- <u-modal v-model="login" show-cancel-button :content="'您还未登陆,请登录'">
			<view  slot="confirm-button">
				<button @click="getuserinfo" class="wxlogin">
					登录
				</button>
			</view>
		</u-modal> -->
		
		<!-- 兼容快手小程序写法 -->
		<u-popup v-model="login" mode="center" border-radius="20" width="400rpx">
			<view class="loginPop">
				<view class="loginPop-title">您还未登陆,请登录</view>
				<view class="loginPop-main">
					<view class="loginPop-main-close" @click="login = false">取消</view>
					<button @click="getuserinfo" class="wxlogin">
						登录
					</button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				login: false,
				list:["未使用","已使用","已过期"],
				activeIndex:"0",
				isCheck:false,
				couponsList:[],
				status:'loading',
				total:0,
				page:1,
				scrollTop: 0,
				fid: '',
				dc: '',
				loginInfo:{
					code:'',
					iv:'',
					encryptedData:'',
					store_id:'',
					share_user_id:'',
					encryptedDataPhone:'',
					ivPhone:''
				},
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onLoad({fid, dc}) {
			console.log(889999, fid, dc)
			if(!this.token){
				if (fid) {
					this.fid = fid
					this.dc = dc
				}
				this.login = true
				return
			}
			if (fid) {
				this.fid = fid
				this.dc = dc
				this.receiveCoupon(dc, fid)
			}
			// this.getCoupons()
		},
		onShow(){
			if(!this.token){
				this.login = true
				return
			}
			this.getCoupons()
		},
		async onPullDownRefresh() {
			// this.couponsList=[]
			this.$u.toast('刷新成功!')
			await this.getCoupons(true)
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.total > this.couponsList.length) {
				this.page++;
				// this.getCoupons();
			}
		},
		methods: {
			// 授权用户信息
			async getuserinfo(e){
				// 登录
				uni.login({
					success: res => {
					 this.loginInfo.code = res.code
					 this.isClick = true
					}
				})
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: async (res) => {
						let { iv, encryptedData } = res;
						this.loginInfo.iv = iv
						this.loginInfo.encryptedData = encryptedData
						this.loginInfo.share_user_id = this.share_user_id
						this.loginInfo.store_id = this.store_id
						// this.loginInfo.fid = this.fid
						this.wxLogin()
				   },
				   fail:(res1)=>{
					   console.log(res1,'登录失败');
					   this.isClick = false
				   }
				})
			},
			// 登录
			async wxLogin(){
				let {data,code,msg} = await this.$u.api.wxLogin(this.loginInfo);
				uni.hideLoading()
				if(code){
					this.login = false
					if(data.user_token){
						this.$u.vuex('token', data.user_token)
						console.log(9999, this.dc, this.fid)
						if (this.fid) {
							this.receiveCoupon(this.dc, this.fid)
						}
						this.getUserInfo()
						this.getCoupons()
						setTimeout(()=>{
							uni.showToast({
								duration:2000,
								title:'登录成功',
								icon:'success'
							})
						},500)
					}else{
						this.isPhoneAuth = true
					}
				}else{
					this.isClick = false
				}
			},
			// 获取用户信息
			async getUserInfo(){
				let {data,code} = await this.$u.api.userInfo({store_id:this.store_id});
				if(code){
					this.$u.vuex('userInfo', data)
					console.log('userinfo-----', data)
				}
			},
			
			receiveCoupon (cid, sid) {
				this.$u.api.receiveCouponById({id: cid, staff_id: sid}).then(res =>{
					console.log('领取二维码：', res)
					if (res.code) {
						this.$u.toast('领取成功!')
						this.fid = ''
						this.dc = ''
						this.getCoupons()
					}
				})
			},
			getStausText(val){
				switch(val){
					case 0 :
					return '通用券'
					case 1 :
					return '商品券'
					case 2 :
					return '项目券'
				}
			},
			// 获取优惠券列表
			async getCoupons(){
				if (this.fromType) return
				this.fromType = true
				let {data,code} = await this.$u.api.getUserCoupons({store_id:this.store_id,status:this.activeIndex,page:this.page});
				this.fromType = false
				if(code){
					if(this.page == 1 && !data.data.lenght){
						this.status = 'nomore';
					}
					this.couponsList = [...this.couponsList, ...data.data];
					this.total = data.total;
					if (this.total <= this.couponsList.length) this.status = 'nomore';
					else this.status = 'loading';
				}
			},
			chiose(index){
				this.couponsList=[]
				this.page=1
				this.status="loading"
				this.activeIndex = JSON.stringify(index)
				this.getCoupons()
			}
		}
	}
</script>

<style lang="scss" scoped >
.container{
	padding: 50rpx 30rpx;
	.icon-weixuanzhong{
		color: #979797;
		font-size: 34rpx;
	}
	.icon-a-xingzhuang1{
		color: #D1B87D;
		font-size: 34rpx;
	}
	.noDate{
		width: 360rpx;
		position: absolute;
		left: 50%;
		top: 34%;
		transform: translate(-50%,-50%);
		color: #666666;
		font-size: 26rpx;
		text-align: center;
		image{
			width: 360rpx;
			height: 310rpx;
			display: block;
			margin-bottom: 78rpx;
		}
	}
	.couponList{
		.list{
			width: 686rpx;
			height: 161rpx;
			position: relative;
			margin-bottom: 30rpx;
			image{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
			}
			.couponContent{
				width: 686rpx;
				height: 161rpx;
				position: absolute;
				top: 0;
				z-index: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 26rpx 34rpx 31rpx 0rpx;
				.left{
					display: flex;
					.couponL{
						color: #007664;
						margin-right: 52rpx;
						.price{
							width: 198rpx;
							// border: 1rpx solid;
							font-size: 30rpx;
							line-height: 74rpx;
							text-align: center;
							font-weight: bold;
							text{
								font-size: 40rpx;
							}
						}
						.fullReduction{
							width: 198rpx;
							font-size: 22rpx;
							text-align: center;
						}
					}
					.couponM{
						.t1{
							color: #4D5562;
							font-size: 28rpx;
							margin-bottom: 14rpx;
							line-height: 33rpx;
							margin-top: 20rpx;
						}
						.t2{
							color: #999999;
							font-size: 22rpx;
						}
					}
				}
				.couponR{
					width: 104rpx;
					// border-left: 2rpx dashed rgba(207,11,43,.3);
					height: 137rpx;
					position: relative;
					.icon{
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
					}
					.btn{
						width: 111rpx;
						height: 52rpx;
						background: #007664;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						text-align: center;
						line-height: 52rpx;
						position: absolute;
						right: -20rpx;
						top: 50%;
						transform: translateY(-50%);
					}
					.checked{
						background: white;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						border: 2rpx solid rgba(0,118,100,0.7);
						color: rgba(0,118,100,0.7);
					}
				}
			}
		}
	}

	.tabList{
		display: flex;
		justify-content: space-between;
		// padding: 0 43rpx;
		margin-bottom: 40rpx;
		margin-top: 20rpx;
		// border: 1rpx solid;
		.list{
			width: 200rpx;
			height: 52rpx;
			background: rgba(194,194,194,.1);
			border-radius: 68rpx;
			text-align: center;
			line-height: 52rpx;
			color: #666666;
			font-size: 24rpx;
		}
		.active{
		  background: #007664;
		  color: white;
		}
	}
}
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
